<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<view class="nav fixed flex padding-sm justify-between bg-white" :style="[{top:CustomBar + 'px'}]">
			<button class="cu-btn line-green sm shadow" @click="click_goBackDay">
				<text class="cuIcon-back" style="font-size: 30rpx;"></text>
				前一天
			</button>
			<picker class="flex align-center justify-start" mode="date" :value="queryDate" @change="click_changeDate">
				<view class="picker flex align-center">
					{{queryDate}} <text class="cuIcon-calendar text-green" style="font-size: 42rpx !important; margin-left: 6rpx;"></text>
				</view>
			</picker>
			<button class="cu-btn line-green sm shadow" @click="click_goNextDay">
				后一天
				<text class="cuIcon-right" style="font-size: 30rpx;"></text>
			</button>
		</view>
		
		<view class="padding-sm">
			<uni-segmented-control :current="current" :values="items" @clickItem="click_changeTab" styleType="button"
				activeColor="#4cd964"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<!-- 排列方式垂直排列，文字居中 -->
					<view class="flex flex-direction text-center bg-green">
						<text>{{showData.visitsTotal}}</text>
						<text>门诊总人次 > ></text>
					</view>
					
					<uni-card title="互联网门诊概况" extra="详情>>" :margin="0" :padding="0">
						<view class="flex">
							<view class="flex flex-sub text-center bg-green flex-direction radius padding-sm" >
								<text>589</text>
								<text>就诊人次</text>
							</view>
							<view class="flex flex-sub text-center bg-green flex-direction radius padding-sm" >
								<text>589</text>
								<text>取药人次</text>
							</view>
							<view class="flex flex-sub text-center bg-green flex-direction radius padding-sm" >
								<text>589</text>
								<text>物流配送</text>
							</view>
						</view>
					</uni-card>
					
					<uni-card title="患者地区分布" extra="详情>>" :margin="0" :padding="0">
						<view class="charts-box">
						  <qiun-data-charts
						    type="pie"
						    :chartData="chartData"
						    background="none"
						  />
						</view>
					</uni-card>
					
				</view>
				<view v-show="current === 1">
					选项卡2的内容
				</view>
				<view v-show="current === 2">
					选项卡3的内容
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		onShow() {
			this.api_getOutPatientStatistics(this.queryDate)
		},
		data() {
			return {
				showData: {},
				
				title: 'BI指标分析',
				CustomBar: this.CustomBar,
				queryDate: "2021-12-22",
				
				items: ['门诊', '急诊', '住院'], // tab标签页
				current: 0, // 当前激活的标签页索引，从0开始
				
				chartData: {
					"series": [{
						"data": [{
								"name": "天津",
								"value": 50
							},
							{
								"name": "河北",
								"value": 30
							},
							{
								"name": "山东",
								"value": 20
							},
							{
								"name": "辽宁",
								"value": 18
							},
							{
								"name": "内蒙古",
								"value": 8
							},
							{
								"name": "黑龙江",
								"value": 8
							}
						]
					}]
				}
			}
		},
		onLoad() {

		},
		methods: {
			click_goBackDay() {
				this.queryDate = "2021-12-21"
				this.api_getOutPatientStatistics(this.queryDate)
			},
			click_changeDate() {
				
			},
			click_goNextDay() {
				
			},
			click_changeTab(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			api_getOutPatientStatistics(queryDate) {
				this.$Common.httpPost("/rest/BiIndex/getOutPatientStatistics", {queryDate: queryDate}, (res)=> {
					this.showData = res.data;
					console.log(this.showData)
				})
			},
		}
	}
</script>

<style>
</style>
